<template>
  <el-col :span="span">
    <el-form-item :prop="prop" :label="label">
      <el-select v-if="type === 'select'" v-model="inputData" @change="change" :placeholder="placeholder"
                 :size="size" :disabled="disabled" :clearable="clearable">
        <el-option v-for="(item, i) in dictList" :key="i" :label="item[dictProps.label]" :value="item[dictProps.value]"></el-option>
      </el-select>

<!--      onKeypress="return(/[\d\.]/.test(String.fromCharCode(event.keyCode)))"-->

<!--      <el-input :type="type" v-else-if="type === 'number'" v-model="inputData" :placeholder="placeholder" :disabled="disabled"  @change="change" onKeypress="return(/[\d\.]/.test(String.fromCharCode(event.keyCode)))"></el-input>-->

      <el-input :type="type" v-else v-model="inputData" :placeholder="placeholder" :disabled="disabled" :maxlength="maxlength" :show-word-limit="showWordLimit" @change="change">
        <div slot="suffix" style="line-height:30px" v-if="showWordLimit && type === 'input'">{{inputData ? inputData.length:0}}/{{maxlength}}</div>
      </el-input>
    </el-form-item>
  </el-col>
</template>
<script>
import { remote } from '@/api/admin/dict';
export default {
  props: {
    //表单类型
    type: {
      type: String,
      default: 'input'
    },
    span: {
      type: Number,
      default: 12
    },
    label: {
      type: String,
      default: ''
    },
    prop: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: 'small'
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    maxlength:{
      type: Number,
      default: 50,
    },
    showWordLimit:{
      type: Boolean,
      default: true
    },
    clearable:{
      type: Boolean,
      default: false
    },
    value: {},
    dictData: {
      type: Array,
      default: () => {
        return []
      }
    },
    dictProps: {
      type: Object,
      default: () => {
        return {
          label: 'label',
          value: 'value'
        };
      }
    },
    dictType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      inputData: this.value,
      dictList: this.dictData ? this.dictData : [],
      commList: [
        {
          label: '接入',
          value: 'IN'
        },
        {
          label: '接出',
          value: 'OUT'
        }
      ],
    };
  },
  watch: {
    value(newVal, oldVal) {
      this.inputData = newVal;
    },
    dictData(newVal, oldVal) {
      if (newVal) {
        this.dictList = newVal;
      }
    }
  },
  created() {
    if (this.type !== 'select') return false;

    if (this.dictType !== 'custom') {
      this.getDict(this.dictType);
    } else {
      this.dictList = this.commList;
    }
  },
  methods: {
    //获取字典
    getDict(type) {
      if (type) {
        remote(type).then(response => {
          const code = response.data.code;
          if (code === 0) {
            this.dictList = response.data.data;
          }
        });
      } else {
        this.dictList = this.dictData;
      }
    },
    // 提交及改变
    change() {
      this.$forceUpdate()
      this.$emit('input', this.inputData);
      this.$emit('change', {
        prop: this.prop,
        type: this.type,
        value: this.inputData
      });
    }
  }
};
</script>
